<script setup>
    //
</script>

<template>
    <view class="custom-tabs">
        <view class="custom-tabs-bar active">
            <text class="tabbar-text">关注</text>
        </view>
        <view class="custom-tabs-bar">
            <text class="tabbar-text">推荐</text>
        </view>
        <view class="custom-tabs-bar">
            <text class="tabbar-text">护肤</text>
        </view>
        <view class="custom-tabs-bar">
            <text class="tabbar-text">减脂</text>
        </view>
        <view class="custom-tabs-bar">
            <text class="tabbar-text">饮食</text>
        </view>
        <view class="custom-tabs-cursor"></view>
    </view>
</template>

<style lang="scss">
    // 自定义tabbar
    .custom-tabs {
        display: flex;
        position: relative;
        padding: 0 30rpx;
    }

    .custom-tabs-bar {
        height: 80rpx;
        line-height: 80rpx;
        color: #979797;
        padding-right: 30rpx;
        position: relative;

        &.active {
            color: #121826;
            font-weight: 500;
        }
    }

    .tabbar-text {
        font-size: 30rpx;
    }

    .custom-tabs-cursor {
        position: absolute;
        bottom: 3px;
        left: 20px;

        width: 20px;
        height: 2px;
        border-radius: 2px;
        background-color: #2cb5a5;
        transition: all 0.3s ease-out;
    }
</style>
